<template>
  <a-modal v-model:visible="visible" title="报表设置" :footer="null">
    <div class="py-8">
      <a-form
        :model="formState"
        name="basic"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 14 }"
        autocomplete="off"
        @finish="$emit('finished', $event)"
      >
        <a-form-item label="项目" name="project" :rules="[{ required: true, message: '请选择' }]">
          <a-select ref="select" placeholder="请选择" v-model:value="formState.project">
            <a-select-option value="a">项目a</a-select-option>
            <a-select-option value="b">项目b</a-select-option>
            <a-select-option value="c">项目c</a-select-option>
            <a-select-option value="d">项目d</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="类型" name="type">
          <a-select ref="select" placeholder="请选择" v-model:value="formState.type">
            <a-select-option value="1">日报</a-select-option>
            <a-select-option value="2">周报</a-select-option>
            <a-select-option value="3">月报</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="参数定制" name="params">
          <a-checkbox-group
            v-model:value="formState.params"
            :options="['项目管理', '添加项目', '设备管理', '数据管理', '系统管理']"
          />
        </a-form-item>

        <a-form-item label="备注" name="remark">
          <a-textarea v-model:value="formState.remark" :auto-size="{ minRows: 3, maxRows: 8 }" />
        </a-form-item>

        <a-form-item :wrapper-col="{ offset: 6, span: 16 }">
          <a-button type="primary" html-type="submit">确定</a-button>
        </a-form-item>
      </a-form>
    </div>
  </a-modal>
</template>
    <script lang="ts">
import { defineComponent, ref, reactive, nextTick } from 'vue';

interface FormState {
  project: string;
  params: [];
  remark: string;
  type: string;
}
export default defineComponent({
  setup(props, { emit }) {
    const visible = ref<boolean>(false);
    let formState = reactive<FormState>({
      project: '',
      params: [],
      remark: '',
      type: '',
    });

    const open = () => {
      visible.value = true;
    };

    const finished = (event) => {
      visible.value = false;
    };

    return {
      visible,
      finished,
      open,
      formState,
    };
  },
});
</script>
    
    